<template>
  <div class="app-container">
    <!-- 搜索框 -->
    <div class="search-box">
      <el-input
        placeholder="请输入搜索关键词"
        v-model="keyword"
        @keyup.enter.native="handleSearch"
        size="large"
        clearable
      >
        <el-button slot="append" icon="el-icon-search" @click="handleSearch">搜索</el-button>
      </el-input>
    </div>

    <!-- 搜索结果 -->
    <div class="search-result" v-if="keyword">
      <!-- 搜索统计 -->
      <div class="search-info">
        <span>找到约 {{ total }} 条结果（用时 {{ searchTime }} 毫秒）</span>
      </div>

      <!-- 搜索结果列表 -->
      <div class="result-list">
        <div class="result-item" v-for="article in resultList" :key="article.articleId">
          <h3 class="result-title">
            <router-link :to="'/cms/frontend/detail/' + article.articleId">
              <span v-html="highlightKeyword(article.title)"></span>
            </router-link>
          </h3>
          <div class="result-content" v-html="highlightKeyword(article.summary)"></div>
          <div class="result-meta">
            <span class="author">作者：{{ article.author }}</span>
            <span class="time">发布时间：{{ parseTime(article.publishTime) }}</span>
            <span class="views">浏览：{{ article.viewCount }}</span>
          </div>
        </div>
      </div>

      <!-- 分页 -->
      <div class="pagination" v-if="total > 0">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-size="pageSize"
          :total="total"
          layout="prev, pager, next, jumper"
        />
      </div>

      <!-- 无搜索结果 -->
      <div class="no-result" v-if="total === 0">
        <div class="no-result-icon">
          <i class="el-icon-search"></i>
        </div>
        <p>抱歉，没有找到与 <strong>{{ keyword }}</strong> 相关的内容</p>
        <p>请尝试其他关键词，或检查输入是否正确</p>
      </div>
    </div>

    <!-- 热门搜索 -->
    <div class="hot-search" v-else>
      <h3>热门搜索</h3>
      <div class="hot-tags">
        <el-tag 
          v-for="tag in hotTags" 
          :key="tag.tagId" 
          size="large" 
          @click="handleTagSearch(tag)"
          class="hot-tag"
        >
          {{ tag.tagName }}
        </el-tag>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "FrontendSearch",
  data() {
    return {
      // 搜索关键词
      keyword: "",
      // 搜索用时
      searchTime: 0,
      // 搜索结果列表
      resultList: [],
      // 热门标签
      hotTags: [],
      // 分页参数
      pageNum: 1,
      pageSize: 10,
      total: 0
    };
  },
  created() {
    // 获取路由参数中的关键词
    this.keyword = this.$route.query.keyword || "";
    
    // 获取热门标签
    this.getHotTags();
    
    // 如果有关键词，执行搜索
    if (this.keyword) {
      this.handleSearch();
    }
  },
  methods: {
    /** 执行搜索 */
    handleSearch() {
      if (!this.keyword.trim()) {
        this.$message.warning("请输入搜索关键词");
        return;
      }
      
      // 记录搜索开始时间
      const startTime = new Date().getTime();
      
      // 模拟搜索结果
      this.resultList = [
        {
          articleId: 1,
          title: "若依CMS系统正式发布",
          author: "若依科技",
          publishTime: new Date(),
          viewCount: 128,
          summary: "若依CMS内容管理系统正式发布，提供强大的内容管理功能。系统基于若依框架开发，界面美观，操作简单，功能完善，易于扩展，安全可靠，性能优越。"
        },
        {
          articleId: 2,
          title: "如何使用若依CMS管理系统",
          author: "若依科技",
          publishTime: new Date(),
          viewCount: 96,
          summary: "本文将详细介绍如何使用若依CMS管理系统进行内容管理。包括文章发布、分类管理、标签管理、评论管理等功能的使用方法。"
        }
      ];
      
      this.total = 20;
      
      // 计算搜索用时
      this.searchTime = new Date().getTime() - startTime;
      
      // 更新浏览器地址栏
      this.$router.replace({
        path: '/cms/frontend/search',
        query: { keyword: this.keyword }
      });
    },
    /** 获取热门标签 */
    getHotTags() {
      // 模拟数据
      this.hotTags = [
        { tagId: 1, tagName: "系统发布" },
        { tagId: 2, tagName: "CMS" },
        { tagId: 3, tagName: "使用指南" },
        { tagId: 4, tagName: "功能介绍" },
        { tagId: 5, tagName: "技术文章" },
        { tagId: 6, tagName: "行业资讯" }
      ];
    },
    /** 标签搜索 */
    handleTagSearch(tag) {
      this.keyword = tag.tagName;
      this.handleSearch();
    },
    /** 分页处理 */
    handleCurrentChange(page) {
      this.pageNum = page;
      this.handleSearch();
    },
    /** 高亮关键词 */
    highlightKeyword(text) {
      if (!this.keyword || !text) return text;
      
      const regex = new RegExp(`(${this.keyword})`, 'gi');
      return text.replace(regex, '<span class="highlight">$1</span>');
    }
  }
};
</script>

<style scoped>
.search-box {
  max-width: 600px;
  margin: 0 auto 30px;
}

.search-info {
  margin-bottom: 20px;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
  color: #666;
}

.result-item {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px dashed #eee;
}

.result-item:last-child {
  border-bottom: none;
}

.result-title {
  margin: 0 0 10px 0;
  font-size: 18px;
}

.result-title a {
  color: #333;
  text-decoration: none;
}

.result-title a:hover {
  color: #409EFF;
}

.result-content {
  color: #666;
  line-height: 1.6;
  margin-bottom: 10px;
}

.result-meta {
  font-size: 14px;
  color: #999;
}

.result-meta span {
  margin-right: 15px;
}

.pagination {
  margin-top: 30px;
  text-align: center;
}

.no-result {
  text-align: center;
  padding: 50px 0;
}

.no-result-icon {
  font-size: 60px;
  color: #ccc;
  margin-bottom: 20px;
}

.no-result p {
  color: #666;
  margin: 10px 0;
}

.hot-search {
  text-align: center;
}

.hot-search h3 {
  margin-bottom: 20px;
}

.hot-tags {
  max-width: 800px;
  margin: 0 auto;
}

.hot-tag {
  margin: 0 10px 10px 0;
  cursor: pointer;
}

.highlight {
  color: #f56c6c;
  font-weight: bold;
}
</style>